<template>
    <div class="container container-editPass">
        <a-drawer width="800" title="" placement="right" :closable="true" :visible="visible" @close="onClose"
            class="editPass-drawer">
            <img class="login-bg" :src="require('@/assets/img/login-bg.png')" />
            <a-spin tip="Loading..." :spinning="formLoading">
                <img class="login-logo-img" :src="require('@/assets/img/login-f.png')" />
                <div class="login-main">
                    <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                        :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
                        <div class="form-panel">
                            <a-form-model-item class="yuan-form-item" label="原密码" prop="password">
                                <a-input type="password" style="width:250px" v-model="formData.password" placeholder="请输入密码"
                                    autocomplete="new-password" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="新密码" prop="newPassword">
                                <a-input type="password" style="width:250px" v-model="formData.newPassword" placeholder="请输入密码"
                                    autocomplete="new-password" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="确认新密码" prop="passwordCopy">
                                <a-input type="password" style="width:250px" v-model="formData.passwordCopy" placeholder="请输入密码"
                                    autocomplete="new-password" />
                            </a-form-model-item>
                            <div class="login-btn-box">
                                <a-button class="login-btn" type="default" @click="onClose">取消</a-button>
                                <a-button class="login-btn" type="primary" @click="sure">确认修改</a-button>
                            </div>

                        </div>
                    </a-form-model>
                </div>
            </a-spin>
        </a-drawer>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";

@Component({
    name: "dom",
    components: { UploadVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    formData: any = {};
    formLoading = false;
    rules = {
        newPassword: [{ required: true, message: "请输入新密码", trigger: "change" }],
        password: [{ required: true, message: "请输入密码", trigger: "change" }],
        passwordCopy: [{ required: true, message: "请重复新密码", trigger: "change" }],
    };

    onClose() {
        (this.$refs.form as any).resetFields();
        this.$emit("closeDrawer");
    }

    sure() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                if (this.formData.newPassword !== this.formData.passwordCopy) {
                    this.$message.error("新密码和重复密码不一致，请检查后重试");
                    return;
                }
                this.formLoading = true;
                try {
                    const res = await api.editUserInfo(this.formData);
                    this.$message.success(res.msg);
                    this.onClose();
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    pageReady = false;
    mounted() {
        this.pageReady = true;
    }
}
</script>

<style lang="scss">
.editPass-drawer.ant-drawer-open {
    .ant-drawer-content-wrapper {
        right: 30px !important;
    }
}
.editPass-drawer {
    .ant-drawer-content {
        border-radius: 12px;
    }
    .ant-drawer-content-wrapper {
        height: 500px !important;
        top: calc(100vh / 2 - 250px);
    }
    .ant-spin-nested-loading {
        z-index: 2;
    }
    .login-logo-img {
        width: 226px;
    }
    .login-main {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        margin-top: 50px;
    }
    .login-bg {
        width: 100%;
        height: 500px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        border-radius: 12px;
    }

    .yuan-form {
        width: 450px;
        margin: 0 auto;
    }
    .login-btn-box {
        display: flex;
        justify-content: space-between;
        padding: 0 50px;
        margin-top: 30px;
    }
    .login-btn {
        width: 130px;
        height: 48px;
        font-size: 18px;
    }
    .yuan-form-item {
        margin-bottom: 30px !important;
    }
}
</style>
